<template>
  <div class="app-container">
    <el-form :model="form" class="form-inline" ref="form" label-width="90px">
      <el-row :gutter="10">
        <el-col :lg="6" :xl="4"><el-form-item label="企业名称" style="width: 100%">
            <el-input v-model="form.enterpriseName" placeholder="企业名称"></el-input> </el-form-item></el-col>
        <el-col :lg="6" :xl="4"><el-form-item label="注册手机号" style="width: 100%">
            <el-input v-model="form.phonenumber" placeholder="注册手机号"></el-input> </el-form-item></el-col>
        <el-col :lg="6" :xl="4"><el-form-item style="width: 100%" label="审核状态">
            <el-select v-model="form.checkStatus" placeholder="审核状态">
              <el-option label="全部" value=""></el-option>
              <el-option label="未审核" :value="0"></el-option>
              <el-option label="待审核" :value="1"></el-option>
              <el-option label="审核未通过" :value="2"></el-option>
              <el-option label="审核通过" :value="3"></el-option>
            </el-select> </el-form-item></el-col>
        <el-col :lg="6" :xl="4">
          <el-button type="primary" @click="getTableData">查询</el-button>
          <el-button type="primary" :disabled="!tableData.length" @click="downloadExcel">导出</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-table ref="table" :data="tableData">
      <!-- <el-table-column prop="type" label="类型" width="180">
            </el-table-column> -->
      <el-table-column prop="enterpriseName" align="center" label="企业全称" width="180">
      </el-table-column>
      <el-table-column prop="phonenumber" align="center" label="注册手机号">
      </el-table-column>
      <el-table-column prop="contactName" align="center" label="联系人">
      </el-table-column>
      <el-table-column prop="contactPhone" align="center" label="联系电话">
      </el-table-column>
      <el-table-column prop="balance" align="center" label="个人余额">
      </el-table-column>

      <el-table-column align="center" prop="insureMoney" label="总投保金额" width="120">
      </el-table-column>
      <el-table-column align="center" prop="claimMoney" label="总理赔金额" width="120">
      </el-table-column>
      <el-table-column align="center" prop="insureNum" label="总投保成功订单数" width="130">
      </el-table-column>
      <el-table-column align="center" prop="claimNum" label="总索赔订单数" width="120">
      </el-table-column>
      <!-- <el-table-column prop="balance" align="center" label="投保金额">
            </el-table-column> -->
      <el-table-column prop="checkStatus" align="center" label="审核状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.checkStatus === '0'">未审核</el-tag>
          <el-tag v-if="scope.row.checkStatus === '1'">待审核</el-tag>
          <el-tag v-if="scope.row.checkStatus === '2'" type="danger">审核未通过</el-tag>
          <el-tag v-if="scope.row.checkStatus === '3'" type="success">审核通过</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="contactType" label="启用状态">
        <template slot-scope="scope">
          <el-switch :value="scope.row.status == '2'" @change="enableStatusChange(scope.row)" active-color="#13ce66" inactive-color="#ff4949">
          </el-switch>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="balance" align="center" label="保单数量">
            </el-table-column> -->
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-view" @click="view(scope.row)">查看</el-button>
          <el-button v-if="scope.row.checkStatus === '1'" size="mini" type="text" icon="el-icon-document-checked" @click="examine(scope.row)">审核</el-button>
          <el-button v-if="scope.row.checkStatus === '3'" size="mini" type="text" icon="el-icon-document-checked" @click="goToGuaranteeSlip(scope.row)">保单管理</el-button>
          <el-button v-if="scope.row.checkStatus === '3'" size="mini" type="text" icon="el-icon-document-checked" @click="goToBalanceManage(scope.row)">资金明细</el-button>
          <el-button v-if="scope.row.checkStatus === '3'" size="mini" type="text" icon="el-icon-document-checked" @click="setVip(scope.row)">设置vip</el-button>
          <el-button v-if="scope.row.checkStatus === '3'" size="mini" type="text" icon="el-icon-document-checked" @click="rechargeClick(scope.row)">充值</el-button>
          <el-button v-if="scope.row.checkStatus === '3'" size="mini" type="text" icon="el-icon-document-checked" @click="resetToZero(scope.row)">余额清零</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination style="margin-top: 20px" background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.pageNum" :page-sizes="[10, 20, 50]"
      :page-size="page.pageSize" layout="->, total, sizes, prev, pager, next, jumper" :total="page.total">
    </el-pagination>
    <view-or-examine :getTableData="getTableData" ref="viewOrExamine"></view-or-examine>

    <el-dialog title="设置vip等级" :visible.sync="showVipLevel" width="40%" v-loading="loading">
      <el-form :model="vipLevelForm" ref="vipLevelForm" label-width="140px">
        <el-form-item label="客户等级">
          <el-select v-model="vipLevelForm.vipLevel">
            <el-option v-for="item in vipLevelList" :key="item.vipLevel" :label="item.vipName" :value="item.vipLevel"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="() => (showVipLevel = false)">取 消</el-button>
        <el-button type="primary" @click="determineSetVip">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="充值" :visible.sync="showRecharge" width="40%" v-loading="loading">
      <el-form :model="rechargeForm" ref="rechargeForm" label-width="140px">
        <el-form-item label="充值金额" prop="balance" :rules="[
          { required: true, message: '请输入充值金额', trigger: 'blur' },
          {
            validator: (rule, value, cb) => checkNum(rule, value, cb),
            message: '请输入数字',
          },
        ]">
          <el-input v-model="rechargeForm.balance"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="walletPassword" :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]">
          <el-input v-model="rechargeForm.walletPassword"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="() => (showRecharge = false)">取 消</el-button>
        <el-button type="primary" @click="determineRecharge">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="余额清零" :visible.sync="showClearZero" width="40%" v-loading="loading">
      <el-form :model="clearZeroForm" ref="clearZeroForm" label-width="140px">
        <el-form-item label="密码" prop="walletPassword" :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]">
          <el-input v-model="clearZeroForm.walletPassword"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="() => (showClearZero = false)">取 消</el-button>
        <el-button type="primary" @click="clearZeroRecharge">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import viewOrExamine from "./viewOrExamine.vue";
import { deepClone } from "@/utils";
import moment from "moment";

export default {
  components: { viewOrExamine },
  data() {
    return {
      loading: false,
      showRecharge: false,
      rechargeForm: {
        balance: "",
        walletPassword: "",
      },
      vipLevelList: [],
      vipLevelForm: {
        vipLevel: "",
      },
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },

      form: {
        // date: '',
        enterpriseName: '',
        phonenumber: "",
        checkStatus: "",
      },
      tableData: [],
      tableHeight: 0,
      screenHeight: document.body.clientHeight,
      row: {},
      showVipLevel: false,
      showClearZero: false,
      clearZeroForm: {
        walletPassword: ''
      }
    };
  },
  methods: {
    resetToZero(row) {
      this.showClearZero = true
      this.row = row
    },
    clearZeroRecharge() {
      const params = {
        customerId: this.row.customerId,
        walletPassword: this.clearZeroForm.walletPassword
      }
      this.$refs.clearZeroForm.validate((valid) => {
        if (valid) {
          if (this.loading) {
            return;
          }
          this.loading = true;
          this.$post(`/system/customer/clearzero`, params).then((res) => {
            if (res && res.code * 1 === 200) {
              this.$message({
                type: "success",
                message: "操作成功!",
              });
              this.showClearZero = false
              this.getTableData();
            }
          }).finally(() => {
            this.loading = false
          })
        }
      });
    },
    goToGuaranteeSlip(row) {
      this.$router.push(`guaranteeSlip?customerId=${row.customerId}`)
    },
    goToBalanceManage(row) {
      this.$router.push(`balanceManage?customerId=${row.customerId}`)
    },
    checkNum(rule, value, cb) {
      const rg = /^(\d+|\d+\.\d+)$/;
      if (!rg.test(value)) {
        cb("请输入大于0的数字");
      }
      cb();
    },
    rechargeClick(row) {
      this.row = row;
      this.rechargeForm = {
        balance: "",
        walletPassword: "",
      };
      this.showRecharge = true;
    },
    determineRecharge() {
      const params = {
        ...deepClone(this.rechargeForm),
        customerId: this.row.customerId,
      };

      this.$refs.rechargeForm.validate((valid) => {
        if (valid) {
          if (this.loading) {
            return;
          }
          this.loading = true;
          this.$post("/system/customer/recharge", params)
            .then((res) => {
              if (res && res.code == "200") {
                this.$message({
                  type: "success",
                  message: "操作成功!",
                });
                this.showRecharge = false;
                this.getTableData();
              }
            })
            .finally(() => {
              this.loading = false;
            });
        }
      });
    },
    downloadExcel() {
      const params = {
        ...deepClone(this.form),
        pageNum: this.page.pageNum,
        pageSize: this.page.pageSize,
      };
      const date = moment().format("YYYY-MM-DD HH:mm:ss");

      this.download(
        "/system/customer/exportCustomer",
        {
          ...params,
        },
        `账户管理${date}.xls`
      );
    },
    determineSetVip() {
      if (this.loading) {
        return;
      }
      this.loading = true;
      const params = {
        customerId: this.row.customerId,
        vipLevel: this.vipLevelForm.vipLevel,
      };
      this.$post(`/system/customer/vip`, params)
        .then((res) => {
          if (res && res.code * 1 === 200) {
            this.$message({
              type: "success",
              message: "设置成功!",
            });
            this.showVipLevel = false;
            this.getTableData();
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    setVip(row) {
      this.vipLevelList = this.$refs.viewOrExamine.vipLevelList;
      this.row = row;
      this.showVipLevel = true;
    },
    enableStatusChange(row) {
      const params = {
        customerId: row.customerId,
      };
      if (row.status !== "2") {
        this.$post(`/system/customer/enable`, params).then((res) => {
          if (res && res.code * 1 === 200) {
            this.$message({
              type: "success",
              message: "启用成功!",
            });
            this.getTableData();
          }
        });
      } else {
        this.$post(`/system/customer/disable`, params).then((res) => {
          if (res && res.code * 1 === 200) {
            this.$message({
              type: "success",
              message: "禁用成功!",
            });
            this.getTableData();
          }
        });
      }
    },
    exportFile() {
      //
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      this.page.pageNum = val;
      this.getTableData();
    },
    view(row) {
      this.$refs.viewOrExamine.dialogFormVisible = true;
      this.$refs.viewOrExamine.title = "查看";
      this.$refs.viewOrExamine.isExamine = false;
      this.$refs.viewOrExamine.row = row;
    },
    examine(row) {
      this.$refs.viewOrExamine.dialogFormVisible = true;
      this.$refs.viewOrExamine.title = "审核";
      this.$refs.viewOrExamine.isExamine = true;
      this.$refs.viewOrExamine.customerId = row.customerId;
      this.$refs.viewOrExamine.row = row;
    },
    setTableHeight() {
      this.$nextTick(() => {
        const queryConditionHeight = this.$refs.form.$el.offsetHeight;
        this.tableHeight =
          window.innerHeight - queryConditionHeight - 180 + "px";
      });
    },
    getTableData() {
      const params = {
        ...deepClone(this.form),
        pageNum: this.page.pageNum,
        pageSize: this.page.pageSize,
      };
      this.$get("/system/customer/list", params).then((res) => {
        if (res && res.code * 1 === 200) {
          this.tableData = res.rows;
          this.page.total = res.total;
        } else {
          this.tableData = [];
          this.page.total = 0;
        }
      });
    },
  },
  mounted() {
    window.onresize = () => {
      this.setTableHeight();
    };
    this.setTableHeight();
    this.getTableData();
  },
};
</script>
<style scoped lang="scss">
.form-inline ::v-deep {
  width: 100%;

  .el-form-item__label {
    // padding: 0;
  }
}
</style>
